<template>
    <div class="flow">
        <div class="flow-header">
            <span v-for="(item, index) in header" :key="index"
                :class="data.select == index ? 'select-header' : 'header-title'" @click="selectHeader(item, index)">{{
                    item }}</span>
        </div>
        <div class="iconCategory">
            <ul class="iconCategory-ul">
                <template v-if="data.select == 2">
                    <li class="iconCategory-li">
                        <p class="filename">{{ $t('webAuto.ProcessInformation') }}</p>
                        <p class="approval ">{{ $t('webAuto.ApprovalProgress') }}</p>
                        <p class="releaseTime">{{ $t('webAuto.ApplicationTime') }}</p>
                    </li>
                    <li class="backdrop iconCategory-li" v-for="(item, index) in mineList" :key="index">
                        <p class="filename items" @click="showProcess(item)">
                            {{ item.processDefName +'，'+$t('webAuto.InstanceNumber') + '：' + item.superInstanceId + '，'+$t('webAuto.abstract') + '：' +
                                (item.formAbstracts.length ? item.formAbstracts : $t('webAuto.notHave')) }}
                        </p>
                        <p class="approval">{{ item.taskName }}</p>
                        <p class="releaseTime">{{ removeTime(item.startTime) }}</p>
                    </li>
                </template>
                <template v-else>
                    <li class="iconCategory-li">
                        <p class="publisher">{{ $t('webAuto.applicant') }}</p>
                        <p class="filename ">{{ $t('webAuto.ProcessInformation') }}</p>
                        <p class="releaseTime">{{ $t('webAuto.ApplicationTime') }}</p>
                    </li>
                    <li class="backdrop iconCategory-li" v-for="(item, index) in mineList" :key="index">
                        <p class="publisher">{{ item.owner.name }}</p>
                        <p class="filename items" @click="showProcess(item)">
                            {{ item.processDefName + '，'+$t('webAuto.InstanceNumber') + '：'  + item.superInstanceId + '，'+$t('webAuto.abstract') + '：' +
                                (item.formAbstracts.length ? item.formAbstracts2 :  $t('webAuto.notHave')) }}
                        </p>
                        <p class="releaseTime">{{ removeTime(item.createTime) }}</p>
                    </li>
                </template>
            </ul>
        </div>
        <!-- footer -->
        <div class="more">
            <span class="icon" @click="moreClicks">{{ $t('webAuto.more') }}</span>
        </div>
        <el-dialog :title="$t('webAuto.ApprovalDetails')" v-model="data.processVisible" closeFree
            style="height: auto;min-height:100%;;width: 100%;margin:0!important;" :close-on-click-modal="false"
            :close-on-press-escape="false">
            <!-- :size="isMobile ? '100%' : '500px'" direction="rtl" -->
            <instance-preview v-if="data.processVisible" :node-id="data.selectInstance.nodeId"
                :instance-id="data.selectInstance.instanceId" @handler-after="handlerAfter"></instance-preview>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import InstancePreview from '../../workspace/approval/ProcessInstancePreview2.vue'
import { useRouter } from 'vue-router'
/**
     * Card 内容卡
     * @description
     * @property {String} header 标题
     * @property {String} selectHeader 默认选择那个标题
     * @property {Array} list 中间内容展示的数据
*/
const props = defineProps({
    header: {
        type: Array,
        default: ''
    },
    selectHeader: {
        type: Number,
        default: 0
    },
    mineList: {
        type: Array,
        default: []
    }
})
const data = reactive({
    select: null,
    selectInstance: null,
    processVisible: false,
})
onMounted(() => {
    data.select = props.selectHeader; // 初始化时，选中默认的头部
})
const emit = defineEmits(['setMine']);
// 触发向父组件传值
// 点击头部标题，向父组件传值
const selectHeader = (item, index) => {
    data.select = index
    emit('setMine', item);
}

const showProcess = (item) => {
    console.log('12121item', item)
    data.processVisible = true
    data.selectInstance = item
}

const handlerAfter = () => {
    data.processVisible = false
}
// 路由跳转
const router = useRouter()
const moreClicks = () => {
    let path = ''
    if (data.select == 0) {
        path = '/workspace/unfinished'
    } else if (data.select == 1) {
        path = '/workspace/finished'
    } else if (data.select == 2) {
        path = '/workspace/submit'
    } else {
        path = '/workspace/cc'
    }
    const { href } = router.resolve({ path });
    window.open(href, '_blank');
}

const removeTime = (dateStr) => {
    const date = new Date(dateStr);
    // 设置时分秒为0
    date.setHours(0, 0, 0, 0);
    // 将Date对象格式化为YYYY-MM-DD字符串
    return date.toISOString().split('T')[0];
}
</script>


<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
}

.flow {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    &-header {
        background-color: rgb(255, 255, 255);
        color: rgb(51, 51, 51);
        font-size: 17px;
        height: 45px;
        line-height: 45px;
        border-bottom: 1px solid rgb(221, 221, 221);
        padding: 0 15px;

        .header-title {
            padding: 6px 8px;
            color: inherit;
            font-weight: 400;
            border-bottom: none;
        }

        .select-header {
            cursor: pointer;
            padding: 6px 8px;
            color: rgb(234, 10, 42);
            font-weight: 600;
            border-bottom: 2px solid rgb(234, 10, 42);
        }
    }

    .iconCategory {
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
    }
}

.iconCategory-ul {
    padding: 5px 10px 10px 10px;
    list-style: none;
    overflow: hidden;
    white-space: nowrap;

    .iconCategory-li {
        height: 30px;
        line-height: 30px;
        border-top: solid 1px #e8e8e8;
        color: #666;
        overflow: hidden;
        white-space: nowrap;
        display: flex;
        flex-direction: row;

        .publisher {
            width: 100px;
            height: 30px;
            line-height: 30px;
            padding: 0 8px;
        }

        .filename {
            flex: 1;

        }

        .items {
            font-size: 12px;
            background: linear-gradient(to right, #79b989, #e34b4b) no-repeat right bottom;
            /*即下划线（背景图）在默认情况下宽度为0 */
            background-size: 0 2px;
            /* 设定过度时间 */
            transition: background-size 1300ms;
        }

        .items:hover {
            cursor: pointer;
            background-position-x: left;
            /* 设定下划线宽度为100%展示 */
            background-size: 100% 2px;
        }

        .approval {
            width: 150px;
            height: 30px;
            line-height: 30px;
            padding: 0 8px;
        }

        .releaseTime {
            min-width: 90px;
            max-width: 120px;
            height: 30px;
            line-height: 30px;
            padding: 0 8px;
            text-align: right;
        }
    }

    .iconCategory-li:first-child {
        border-top: none;
    }

    .content-list {
        color: #666;
        overflow: hidden;
        font-size: 12px;
        height: 32px;
        line-height: 32px;
    }

    .backdrop:nth-child(even) {
        background-color: #f9f9f9;
    }
}

.more {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    text-align: right;

    .icon {
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        position: relative;
        font-size: 16px;
        cursor: pointer;
        font-size: 16px;
        color: rgb(51, 51, 51);
    }

    .icon::before {
        content: '+';
        position: absolute;
        left: -20px;
        top: -4px;
        content: '+';
        font-size: 26px;
        font-weight: 600;
    }
}
</style>
